<template>
  <div class="app-container">
    <div v-show="!open&&!detail">
      <el-form :model="queryParams" ref="queryForm" :inline="true" v-show="showSearch">
        <el-form-item label="应用系统名称:" prop="projectname">
          <el-input v-model="queryParams.projectname" placeholder="请输入系统名称" clearable size="small"
            @keyup.enter.native="handleQuery" />
        </el-form-item>
        <el-form-item>
          <el-button :loading="btnLoading" type="cyan" icon="el-icon-search" size="mini" @click="handleQuery">搜索
          </el-button>
          <el-button :loading="btnLoading" icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
        </el-form-item>
      </el-form>
      <el-row :gutter="10" class="mb8">
        <el-col :span="1.5">
          <el-button :loading="btnLoading" type="primary" icon="el-icon-plus" size="mini" @click="showAdd">
            新增
          </el-button>
        </el-col>
        <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
      </el-row>

      <el-table v-loading="loading" :data="demoList" style="width: 100%">
        <el-table-column label="云服务商" prop="supplierName" />
        <el-table-column label="应用系统名称" prop="projectname" />
        <el-table-column label="业务部门" prop="officeName" />
        <el-table-column label="业主方联系人" prop="contactsNickName" />
        <el-table-column label="状态" prop="constcts">
          <template slot-scope="scope">
            <span :style="{color:scope.row.resStatus==0?'#e2a244':scope.row.resStatus==1?'#529cfd':'#909399'}">
              {{scope.row.resStatus==0?'正在上云':scope.row.resStatus==1?'上云':'下云'}}
            </span>
          </template>
        </el-table-column>
        <el-table-column label="申请日期" prop="appdate" />
        <el-table-column label="操作" class-name="small-padding fixed-width">
          <template slot-scope="scope">
            <el-button :loading="btnLoading" size="mini" type="text" icon="el-icon-search"
              @click="showDetail(scope.row.id)">详情</el-button>
          </template>
        </el-table-column>
      </el-table>
      <pagination v-show="total>0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize"
        @pagination="getList" />
    </div>
    <div v-show="open">
      <Add ref="add" @next="next" :dept="dept" />
      <div style="display: flex;justify-content: flex-end;margin-top: 10px;">
        <el-button :loading="btnLoading" type="primary" @click="next(false)">提交</el-button>
        <el-button :loading="btnLoading" @click="cancel">取 消</el-button>
      </div>
    </div>
    <div v-if="detail">
      <Detail ref="detail" :form="detail" :otherFlag="false"/>
      <div style="display: flex;justify-content: flex-end;margin-top: 10px;">
        <el-button :loading="btnLoading" @click="detail=null">关 闭</el-button>
      </div>
    </div>



    <el-dialog title="单位名称" :visible.sync="verificationShow" width="90%" append-to-body>
      <el-table v-loading="loading" :data="demoList" style="width: 100%">
        <el-table-column label="账号单" prop="applyNum" />
        <el-table-column label="总金额" prop="applyNum" />
        <el-table-column label="所属资源池" prop="applyNum" />
        <el-table-column label="服务提供商" prop="applyNum" />
      </el-table>
    </el-dialog>


  </div>
</template>

<script>
  import {
    cloudUpList,
    cloudUpConfInfo,
    addCloudUp, exportCloudUp
  } from "@/api/cloud/cloud";
  import {
    treeselect
  } from "@/api/system/dept";
  import {
    listByCode,serviceByClazz
  } from "@/api/resources/apply";
  import {
    getDicts
  } from "@/api/system/dict/data";
  import Add from "./add.vue";
  import Detail from "../resources/apply/addC.vue";
  export default {
    name: "list",
    components: {
      Add,
      Detail
    },
    data() {
      return {
        // 按钮遮罩层
        btnLoading: false,
        // 遮罩层
        loading: false,
        // 显示搜索条件
        showSearch: true,
        // 查询参数
        queryParams: {
          pageNum: 1,
          pageSize: 10,
          projectname: '',
          resStatusList: [0, 1]
        },
        // 总条数
        total: 0,
        // 示例Demo表格数据
        demoList: [],
        // 弹出层标题
        title: "",
        // 是否显示弹出层
        open: false,
        //部门列表树结构
        dept: [],
        //详情
        detail: null,
         //配置
         configure:{
           available_domain:[],//可用域
           cloud_service_provider:[],//服务商
           storage_type:[],//系统盘类型
           codeList:[], //云服务器规格列表
           czxtList:[], //操作系统列表
           ccList:[],  //数据盘类型
           fwcpList:[],  //服务型磁盘类型
           wlfwqList:[], //高性能服务器资源类型
           sjkList:[], //数据库类型
           yyaqList:[], //安全产品
         },







        // 是否显示流程图
        showProcess: false,
        // 是否显示详情
        detailsShow: false,
        // 是否显示申请
        addedShow: false,
        // 是否显示审核
        examineShow: false,
        // 是否显示填写审核
        examineSubmitShow: false,
        examineShow2: false,
        // 是否显示填写审核
        examineSubmitShow2: false,
        // 是否显示用户确认
        userConfirmShow: false,
        // 是否显示用户确认填写意见
        userConfirmSubmitShow: false,
        // 是否显示监管平台分发工单
        distributeShow: false,
        // 是否显示监管平台分发工单选择对象
        distributeSubmitShow: false,
        // 是否显示服务商分配资源
        serviceConfirmShow: false,
        // 是否显示服务商确认填写意见
        serviceConfirmSubmitShow: false,
        // 是否显示资源核验
        verificationShow: false,
        // 是否显示资源核验填写意见
        verificationSubmitShow: false,
        // 申请步骤
        active: 1,

        // 表单参数
        form: {},
        // 表单校验
        rules: {
          applyNum: [{
            required: true,
            message: "申请编号不能为空",
            trigger: "blur"
          }],
          highVoltage: [{
            required: true,
            message: "是否高压停电不能为空",
            trigger: "blur"
          }],
        },
        requestMapping: '/example/demo',

        selectedRow: {},
        selectUserForm: {},
        showSelectUser: false,
        selectUserRules: {
          userOptions: [{
            required: true,
            message: '参与人不能为空',
            trigger: 'blur'
          }, ],
        },
        userOptions: [],
        userNames: [],
      };
    },
    created() {
      this.getList();
      this.getListDept();
      this.getDataOfAdd();
    },
    watch: {
        $route(route) {
          if(route.fullPath == '/cloud'){
              this.getList();
          }
        },
    },
    methods: {
      /** 查询列表 */
      getList() {
        this.loading = true;
        cloudUpList(this.queryParams).then(response => {
          this.demoList = response.rows;
          this.total = response.total;
          this.loading = false;
        }).then(() => {});
      },
      /** 查询详情 */
      showDetail(id) {
        this.$router.push("/clouds/CloudSystemDetails/" + id);
        return
        this.btnLoading = true
        cloudUpConfInfo(id).then(response => {
          let detail=response.data
          detail.storeProducts.forEach(data=>{
            this.configure[data.productCode=='共享型'?'ccList':'fwcpList'].some(it=>{
                if(it.code==data.diskServerCode){
                  data.diskServerCode_label=it.serviceName
                  return true
                }
            })
            data.hostInstanceNames=[]
            if(data.hosts){
              data.hosts.forEach(item=>{
                data.hostInstanceNames.push(item.instanceName)
              })
            }
          })
          detail.databases.forEach(data=>{
            this.configure.sjkList.some(it=>{
                if(it.code==data.serverCode){
                  data.serverCode_label=it.serviceName
                  return true
                }
            })
          })
          detail.hosts.forEach(data=>{
            data.hostName=data.instanceName
            //可用域
            this.configure.available_domain.some(item=>{
                if(item.dictValue==data.availableDomain){
                  data.availableDomain_label=item.dictLabel
                  return true
                }
            })
            //系统盘类型
            if(data.osDisk){
              this.configure.storage_type.some(item=>{
                  if(item.code==data.osDisk.diskServerCode){
                    data.osDisk.diskServerCode_label=item.serviceName
                    return true
                  }
              })
            }
            //数据盘类型
            if(data.disks){
              data.disks.forEach(item=>{
                  this.configure.ccList.some(it=>{
                      if(it.code==item.diskServerCode){
                        item.diskServerCode_label=it.serviceName
                        return true
                      }
                  })
              })
            }else{
              data.disks=[]
            }
            //规格
            if(data.flavorType==1){
                this.configure.codeList.some(item=>{
                    if(item.specCode==data.cloudFlavorCode){
                      data.cloudFlavorCode_label=item.specName
                      data.cloudFlavorCode_desc=item.desc
                      return true
                    }
                })
            }
            if(data.flavorType==2){
                this.configure.wlfwqList.some(item=>{
                    if(item.code==data.cloudFlavorCode){
                      data.cloudFlavorCode_label=item.serviceName
                      data.cloudFlavorCode_desc=item.remark
                      return true
                    }
                })
            }
          })

          this.detail = detail
        }).finally(() => {
          this.btnLoading = false
        });
      },
      //部门列表
      getListDept() {
        treeselect({}).then(response => {
          this.dept = response.data
        })
      },
      //获取一些配置数据
      getDataOfAdd(){
         //可用域
         getDicts('available_domain').then(response => {
             this.configure.available_domain=response.data
         })
         //服务商
         getDicts('cloud_service_provider').then(response => {
             this.configure.cloud_service_provider=response.data
         })
         //盘类型
         serviceByClazz({code:'cc'}).then(response => {
            response.data.forEach(item=>{
               if(['FCcc(tykcc)2','FCcc_ssd','spycc2'].indexOf(item.code)<0){
                 this.configure.storage_type.push(item)
               }
               if(['spycc2'].indexOf(item.code)<0){
                 this.configure.ccList.push(item)
               }
               if(['fbscc_wjcc2','FCcc(tykcc)2','FCcc_ssd'].indexOf(item.code)<0){
                 this.configure.fwcpList.push(item)
               }
            })
         })
         //操作系统
         serviceByClazz({code:'czxt'}).then(response => {
               this.configure.czxtList=response.data
         })
         //云服务器规格列表
         listByCode('spec_ecs').then(response => {
               this.configure.codeList=response.data
         })
         //高性能服务器资源类型列表
         serviceByClazz({code:'wlfwq'}).then(response => {
              this.configure.wlfwqList=response.data
         })
        //数据库类型列表
         serviceByClazz({code:'sjk'}).then(response => {
              this.configure.sjkList=response.data
         })
         //安全产品列表
          serviceByClazz({code:'yyaq'}).then(response => {
               this.configure.yyaqList=response.data
          })
      },
      /** 搜索按钮操作 */
      handleQuery() {
        this.queryParams.pageNum = 1;
        this.getList();
      },
      /** 重置按钮操作 */
      resetQuery() {
        this.resetForm("queryForm");
        this.handleQuery();
      },
      //新增弹窗
      showAdd() {
        this.$router.push("/clouds/AddCloudSystem");
        // this.open = true
      },
      //提交新增
      next(data) {
        if (data) {
          if (data.fundFromRadio == '1') {
            data.fundFrom = '区（县）'
          } else if (data.fundFromRadio == '2') {
            data.fundFrom = '市级'
          }

          this.$confirm('是否确认提交?', "警告", {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning"
          }).then(() => {
            this.btnLoading = true
            addCloudUp(data).then(res => {
              this.$message({
                message: res.msg,
                type: 'success'
              })
              this.open = false
              this.getList()
            }).finally(() => {
              this.btnLoading = false
            })
          })
        } else {
          this.$refs.add.next()
        }
      },
      //关闭
      cancel() {
        this.$refs.add.reset()
        this.open = false
      },
      /** 导出按钮操作 */
      handleExport() {
        const queryParams = this.queryParams;
        this.$confirm("是否确认导出所有上云系统?", "警告", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        })
          .then(function () {
            return exportCloudUp(queryParams);
          })
          .then((response) => {
            this.download(response.msg);
          });
      },
    }
  };
</script>
<style>
  .el-step__description {
    margin: 5px 0 14px 0 !important;
  }
</style>
